import React, { useEffect, useState } from 'react'
import { Table, Space, Button, Modal, Tree } from 'antd';
import axios from 'axios';
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined
 } from '@ant-design/icons';

const { confirm } = Modal;

export default function Rolelist() {
  const [dataSource, setDataSource] = useState([]);
  const [treeSource, setTreeSource] = useState([]);
  const [currentRights, setCurrentRights] = useState();
  const [currentId, setCurrentId] = useState();
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
    setDataSource(dataSource.map(item=>{
      if(item.id === currentId){
        return {
          ...item,
          rights: currentRights
        }
      }
      else{
        return item
      }
    }))
    axios.patch(`/roles/${currentId}`,{
      rights:currentRights
    })
  };
  const onCheck = (rightslist) =>{
    setCurrentRights(rightslist);
  }
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const showConfirm = (item) => {
    confirm({
      title: '您确定要删除这一权限吗？',
      icon: <ExclamationCircleOutlined />,
  
      onOk() {
        let list = dataSource;
          list = list.filter((data)=> data.id !== item.id)
          setDataSource(list);
          axios({
            url:`/roles/${item.id}`,
            method:'DELETE'
          })
      },
  
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  useEffect(()=>{
    axios({
      url:'/roles',
    }).then(res => {
      setDataSource(res.data);
    })
  },[])
  useEffect(()=>{
    axios({
      url:'/rights?_embed=children'
    }).then(res =>
      setTreeSource(res.data))
  },[])

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render:(id) => (
        <b>{id}</b>
      )
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <Space size="middle">
          <Button danger shape="circle" icon={<DeleteOutlined />} size='small' onClick={()=>{
            showConfirm(item)
          }}/>
          <Button type='primary' 
          shape="circle" 
          icon={<EditOutlined />} 
          size='small'
          onClick={()=>{
            showModal(item);
            setCurrentRights(item.rights);
            setCurrentId(item.id);
          }}
          />
          <Modal title="角色权限" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <Tree
              checkable
              treeData={treeSource}
              checkedKeys={currentRights}
              onCheck={onCheck}
              checkStrictly={true}
            />
          </Modal>
          </Space>
        )
      },
    },
  ];
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} 
             pagination= {{
              pageSize:5
             }}
             rowKey={(item)=>item.id}
      />
    </div>
  )
}
